<template>
  <div>
    <div v-if="videoOptions" class="mt-1 mb-1">
      <div class="flex justify-end mb-1 ">
        <el-button type="danger" icon="el-icon-circle-close" @click="videoOptions = null">{{$t('close')}}</el-button>
      </div>
      <video-player
        height="280px"
        width="100%"
        :options="videoOptions"
      />
    </div>

    <el-alert
      v-if="settingLoading"
      :title="$t('loading')"
      type="warning"
      center
      show-icon
      :closable="false"
    />
    <div v-else>
      <el-row v-if="model==='block'" :gutter="5">
        <el-col
          v-for="(item,index) in showSettingList"
          :key="index"
          :xs="item.type === 'multiCustom' ? 24 :(item.isFullLine ? 16 : 8)"
          :sm="item.type === 'multiCustom' ? 24 :(item.isFullLine ? 16 : 8)"
          :md="item.type === 'multiCustom' ? 24 :(item.isFullLine ? 16 : 8)"
          :lg="item.type === 'multiCustom' ? 24 :(item.isFullLine ? 16 : 8)"
          :xl="item.type === 'multiCustom' ? 24 :(item.isFullLine ? 12 : 6)"
        >
          <div
            v-if="editModel || showHidden === '1' || !item.hidden"
            :class="[editModel ? 'hidden-border':'item-border','item',searchName != '' && item.name.indexOf(searchName) >= 0 ? 'check' : '']"
            @click.stop="settingClick(item)"
          >
            <div class="flex">
              <div @click.stop>
                <device-setting-icon :setting="item" />
              </div>
              <div v-if="item.editSetting == true" @click.stop="">
                <el-input v-model="item.remark">
                  <template
                    slot="prepend"
                  >{{ item.name }}
                  </template>
                  <el-button
                    slot="append"
                    icon="el-icon-check"
                    @click.stop="updateSettingName(item)"
                  />
                  <el-button
                    slot="append"
                    icon="el-icon-close"
                    @click.stop="cancelUpdateSettingName(item)"
                  />
                </el-input>
              </div>
              <div v-else style="flex-grow: 1;margin-left: 5px">
                <div
                  class="text-xs text-gray-500 flex justify-between"
                  style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
                >
                  <div style="width: 80%" class="truncate" @click.stop="editSetting(item)">
                    <el-popover
                      v-if="item.remark && item.remark!==''"
                      placement="top"
                      width="200"
                      trigger="hover"
                      :content="item.name"
                    >
                      <span slot="reference">{{ item.remark }}</span>
                    </el-popover>
                    <span v-else>
                      <span>{{ item.name }}</span>
                    </span>
                  </div>
                  <div class="text-gray-400">
                    <div v-if="editModel">
                      <span v-if="item.hidden" class="el-icon-view" @click.stop="showSetting(item)" />
                      <span v-else class="el-icon-close" @click.stop="hiddenSetting(item)" />
                    </div>
                  </div>
                </div>
                <div
                  class="text-gray-400 text-xs"
                  style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
                >{{
                  formatDate(item.updateDate) }}
                </div>
              </div>
            </div>
            <div style="min-height: 80px;padding-top: 35px">
              <div
                style="color: #a2e5eb;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: center"
                @click.stop
              >
                <div v-if="item.type === 'fixedParam'">
                  <div v-if="item.paramList.length > 5">
                    <el-select
                      v-model="item.value"
                      filterable
                      :disabled="editModel || item.disabled"
                    >
                      <el-option
                        v-for="item2 in item.paramList"
                        :key="item2.value"
                        :label="item2.name + item.unit"
                        :value="item2.value"
                      />
                    </el-select>
                    <el-button
                      type="primary"
                      :disabled="editModel || item.disabled"
                      @click.stop="valueChange(item)"
                    >{{ $t('confirm') }}
                    </el-button>
                  </div>
                  <el-button
                    v-for="(item2,index2) in item.paramList"
                    v-else
                    :key="index2"
                    type="primary"
                    :plain="item2.value !== item.value"
                    :disabled="editModel || item2.disabled"
                    @click="valueChange(item2)"
                  >{{ item2.name + item.unit }}
                  </el-button>
                </div>
                <div v-else-if="item.type === 'switch'">
                  <el-switch
                    v-model="item.value"
                    :disabled="editModel || item.disabled"
                    :active-text="$t('open')"
                    :inactive-text="$t('close')"
                    active-value="1"
                    inactive-value="0"
                    @change="valueChange(item)"
                  />
                </div>
                <div v-else-if="item.type === 'time'">
                  <el-time-picker
                    v-model="item.value"
                    :disabled="editModel || item.disabled"
                    style="width:300px;margin-right: 5px"
                    value-format="HH:mm"
                    format="HH:mm"
                    :placeholder="$t('timing')"
                  />
                  <el-button
                    type="primary"
                    :disabled="editModel || item.disabled"
                    @click.stop="valueChange(item)"
                  >{{ $t('confirm') }}
                  </el-button>
                </div>
                <div v-else-if="item.type === 'timeSlot'" class="flex justify-center">
                  <time-slot v-model="item.value" :disabled="editModel || item.disabled" />
                  <el-button
                    type="primary"
                    :disabled="editModel || item.disabled"
                    @click.stop="valueChange(item)"
                  >{{ $t('confirm') }}
                  </el-button>
                </div>
                <div v-else-if="item.type === 'noParam'">
                  <el-button
                    type="primary"
                    :disabled="editModel || item.disabled"
                    @click.stop="valueChange(item)"
                  >{{ $t('confirm') }}
                  </el-button>
                </div>
                <div v-else-if="item.type === 'slider'">
                  <el-slider
                    v-model="item.value"
                    style="padding:0 20px"
                    :disabled="editModel || item.disabled"
                    @change="valueChange(item)"
                  />
                </div>
                <div  v-else-if="item.type === 'video'">
                  <el-input
                    v-model="item.value"
                    style="width:300px"
                    :disabled="editModel || item.disabled"
                  >
                    <template v-if="item.unit" slot="append">{{ item.unit }}</template>
                  </el-input>
                  <el-button
                    type="primary"
                    :disabled="editModel || item.disabled"
                    @click.stop="valueChange(item)"
                  >{{ $t('play') }}
                  </el-button>
                </div>
                <div v-else-if="item.type === 'multiCustom'" class="flex flex-wrap justify-center">
                  <div
                    v-for="(param,paramIndex) in item.valueList"
                    :key="paramIndex"
                    style="margin:0 5px 5px 5px"
                  >
                    <div v-if="param.type === 'switch'">
                      <el-switch
                        v-model="param.value"
                        active-value="1"
                        inactive-value="0"
                        :disabled="item.disabled"
                      />
                    </div>
                    <div v-else-if="param.type === 'time'">
                      <el-time-picker
                        v-model="param.value"
                        :disabled="item.disabled"
                        style="width:100px"
                        value-format="HH:mm"
                        format="HH:mm"
                        :placeholder="$t('timing')"
                      />
                    </div>
                    <div v-else-if="param.type === 'timeSlot'">
                      <time-slot v-model="param.value" :disabled="item.disabled" />
                    </div>
                    <div v-else-if="param.type === 'slider'">
                      <el-slider
                        v-model="param.value"
                        input-size="mini"
                        :disabled="item.disabled"
                        style="width:200px;"
                      />
                    </div>
                    <div v-else-if="param.type === 'fixedParam'">
                      <el-select
                        v-model="param.value"
                        style="width:100px"
                        :disabled="item.disabled"
                        filterable
                      >
                        <el-option
                          v-for="item2 in item.paramList"
                          :key="item2.value"
                          :label="item2.name + item.unit"
                          :value="item2.value"
                        />
                      </el-select>
                    </div>
                    <el-input
                      v-else
                      v-model="param.value"
                      style="width:55px"
                      :disabled="item.disabled"
                    >
                      <template v-if="item.unit" slot="append">{{ item.unit }}</template>
                    </el-input>
                  </div>
                  <div style="margin:0 5px 5px 5px">
                    <el-button
                      type="primary"
                      :disabled="item.disabled"
                      @click.stop="valueChange(item)"
                    >{{ $t('confirm') }}
                    </el-button>
                  </div>
                </div>
                <div v-else="">
                  <el-input
                    v-model="item.value"
                    style="width:300px"
                    :disabled="editModel || item.disabled"
                  >
                    <template v-if="item.unit" slot="append">{{ item.unit }}</template>
                  </el-input>
                  <el-button
                    type="primary"
                    :disabled="editModel || item.disabled"
                    @click.stop="valueChange(item)"
                  >{{ $t('confirm') }}
                  </el-button>
                </div>
              </div>
            </div>
            <div>
              <span style="font-size: 12px;color:#909399">{{ $t('use')+$t('count') }}:{{ item.useCount }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <div
        v-for="(item,index) in showSettingList"
        v-else-if="model==='list'"
        :key="index"
        @click.stop="settingClick(item)"
      >
        <div v-if="editModel || showHidden === '1' || !item.hidden">
          <div
            style="display: flex;align-items: center;justify-content: space-between;padding: 8px"
            :class="[editModel ? 'hidden-border':'item-border','item',searchName != '' && item.name.indexOf(searchName) >= 0 ? 'check' :'']"
          >
            <div style="display: flex;align-items: center;width: calc(100% - 400px)">
              <div style="margin-right: 5px;margin-top: 3px" @click.stop>
                <device-setting-icon :setting="item" />
              </div>
              <div v-if="item.editSetting == true" @click.stop="">
                <el-input v-model="item.remark">
                  <template
                    slot="prepend"
                  >{{ item.name }}
                  </template>
                  <el-button
                    slot="append"
                    icon="el-icon-check"
                    @click.stop="updateSettingName(item)"
                  />
                  <el-button
                    slot="append"
                    icon="el-icon-close"
                    @click.stop="cancelUpdateSettingName(item)"
                  />
                </el-input>
              </div>
              <div v-else>
                <div class="text-sm" @click.stop="editSetting(item)">
                  <el-popover
                    v-if="item.remark && item.remark!==''"
                    placement="top"
                    width="200"
                    trigger="hover"
                    :content="item.name"
                  >
                    <span slot="reference">{{ item.remark }}</span>
                  </el-popover>
                  <span v-else>
                    <span>{{ item.name }}</span>
                  </span>
                </div>
                <div class="text-gray-400">{{ formatDate(item.updateDate) }}</div>
              </div>
            </div>
            <div v-if="editModel">
              <el-button
                v-if="item.hidden"
                icon="el-icon-view"
                @click.stop="showSetting(item)"
              />
              <el-button
                v-else
                icon="el-icon-close"
                @click.stop="hiddenSetting(item)"
              />
            </div>
            <div v-else style="width: 400px" @click.stop>
              <div v-if="item.type === 'fixedParam'">
                <div v-if="item.paramList.length > 5">
                  <el-select
                    v-model="item.value"
                    filterable
                    :disabled="editModel || item.disabled"
                  >
                    <el-option
                      v-for="item2 in item.paramList"
                      :key="item2.value"
                      :label="item2.name + item.unit"
                      :value="item2.value"
                    />
                  </el-select>
                  <el-button
                    type="primary"
                    :disabled="editModel || item.disabled"
                    @click.stop="valueChange(item)"
                  >{{ $t('confirm') }}
                  </el-button>
                </div>
                <el-button
                  v-for="(item2,index2) in item.paramList"
                  v-else
                  :key="index2"
                  type="primary"
                  :plain="item2.value !== item.value"
                  :disabled="editModel || item2.disabled"
                  @click="valueChange(item2)"
                >{{ item2.name + item.unit }}
                </el-button>
              </div>
              <div v-else-if="item.type === 'switch'">
                <el-switch
                  v-model="item.value"
                  :disabled="editModel || item.disabled"
                  :active-text="$t('open')"
                  :inactive-text="$t('close')"
                  active-value="1"
                  inactive-value="0"
                  @change="valueChange(item)"
                />
              </div>
              <div v-else-if="item.type === 'time'">
                <el-time-picker
                  v-model="item.value"
                  :disabled="editModel || item.disabled"
                  style="width:300px"
                  value-format="HH:mm"
                  format="HH:mm"
                  :placeholder="$t('timing')"
                />
                <el-button
                  type="primary"
                  :disabled="editModel || item.disabled"
                  @click.stop="valueChange(item)"
                >{{ $t('confirm') }}
                </el-button>
              </div>
              <div v-else-if="item.type === 'timeSlot'" class="flex">
                <time-slot v-model="item.value" :disabled="editModel || item.disabled" />
                <el-button
                  type="primary"
                  :disabled="editModel || item.disabled"
                  @click.stop="valueChange(item)"
                >{{ $t('confirm') }}
                </el-button>
              </div>
              <div v-else-if="item.type === 'noParam'">
                <el-button
                  type="primary"
                  :disabled="editModel || item.disabled"
                  @click.stop="valueChange(item)"
                >{{ $t('confirm') }}
                </el-button>
              </div>
              <div v-else-if="item.type === 'slider'">
                <el-slider
                  v-model="item.value"
                  :disabled="editModel || item.disabled"
                  @change="valueChange(item)"
                />
              </div>
              <div v-else-if="item.type === 'multiCustom'">
                <div class="flex flex-wrap">
                  <div
                    v-for="(param,paramIndex) in item.valueList"
                    :key="paramIndex"
                    style="margin:0 5px 5px 5px"
                  >
                    <div v-if="param.type === 'switch'">
                      <el-switch
                        v-model="param.value"
                        active-value="1"
                        inactive-value="0"
                        :disabled="item.disabled"
                      />
                    </div>
                    <div v-else-if="param.type === 'time'">
                      <el-time-picker
                        v-model="param.value"
                        :disabled="item.disabled"
                        style="width:100px"
                        value-format="HH:mm"
                        format="HH:mm"
                        :placeholder="$t('timing')"
                      />
                    </div>
                    <div v-else-if="param.type === 'timeSlot'">
                      <time-slot v-model="param.value" :disabled="item.disabled" />
                    </div>
                    <div v-else-if="param.type === 'slider'">
                      <el-slider
                        v-model="param.value"
                        input-size="mini"
                        :disabled="item.disabled"
                        style="width:200px;"
                      />
                    </div>
                    <div v-else-if="param.type === 'fixedParam'">
                      <el-select
                        v-model="param.value"
                        style="width:100px"
                        :disabled="item.disabled"
                        filterable
                      >
                        <el-option
                          v-for="item2 in item.paramList"
                          :key="item2.value"
                          :label="item2.name + item.unit"
                          :value="item2.value"
                        />
                      </el-select>
                    </div>
                    <el-input
                      v-else
                      v-model="param.value"
                      style="width:55px"
                      :disabled="item.disabled"
                    >
                      <template v-if="item.unit" slot="append">{{ item.unit }}</template>
                    </el-input>
                  </div>
                  <el-button
                    style="margin:0 5px 5px 5px"
                    type="primary"
                    :disabled="item.disabled"
                    @click.stop="valueChange(item)"
                  >{{ $t('confirm') }}
                  </el-button>
                </div>
              </div>
              <div v-else>
                <el-input
                  v-model="item.value"
                  style="width:300px"
                  :disabled="editModel || item.disabled"
                >
                  <template v-if="item.unit" slot="append">{{ item.unit }}</template>
                </el-input>
                <el-button
                  type="primary"
                  :disabled="editModel || item.disabled"
                  @click.stop="valueChange(item)"
                >{{ $t('confirm') }}
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      :visible.sync="showSettingInfo"
      append-to-body
      destroy-on-close
      width="1300px"
      top="15px"
    >
      <device-setting-info v-if="showSettingInfo" :setting="setting" />
    </el-dialog>

  </div>
</template>

<script>
import {
  successNotice,
  formatDate,
  formatDeviceSetting
} from '@/util/common'
import {
  getDeviceSetting,
  sendDeviceSetting,
  updateDeviceSetting
} from '@/api/iot/iotDeviceSettingApi'
import DeviceSettingIcon from '@/components/DeviceSettingIcon'
import DeviceSettingInfo from '@/components/DeviceSettingInfo'
import TimeSlot from '@/components/TimeSlot'
import VideoPlayer from '@/components/VideoPlayer'

export default {
  name: 'DeviceSetting',
  components: {
    TimeSlot,
    DeviceSettingIcon,
    DeviceSettingInfo,
    VideoPlayer
  },
  props: {
    settingList: {
      type: Array,
      default: () => {
        return []
      }
    },
    deviceCore: {
      type: String,
      default: null
    },
    model: {
      type: String,
      default: 'list'
    },
    searchName: {
      type: String,
      default: null
    },
    editModel: {
      type: Boolean,
      default: false
    },
    showHidden: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      showSettingList: [],
      settingLoading: false,
      deviceQueue: [],
      showSettingInfo: false,
      setting: {},
      videoOptions: null
    }
  },
  watch: {
    settingList: {
      deep: true,
      handler(val) {
        this.formatDeviceSettingList()
      }
    }
  },
  created() {
    this.formatDeviceSettingList()
  },
  methods: {
    settingClick(item) {
      this.setting = item
      this.showSettingInfo = true
    },
    editSetting(item) {
      for (const i in this.settingList) {
        if (this.settingList[i].settingId === item.settingId) {
          item.editSetting = true
          this.settingList.splice(i, 1, item)
          break
        }
      }
    },
    cancelUpdateSettingName(item) {
      for (const i in this.settingList) {
        if (this.settingList[i].settingId === item.settingId) {
          item.editSetting = false
          this.settingList.splice(i, 1, item)
          break
        }
      }
    },
    updateSettingName(item) {
      updateDeviceSetting({
        settingId: item.settingId,
        remark: item.remark
      }).then(res => {
        const { code } = res
        if (code === '200') {
          successNotice(this)
        }
        for (const i in this.settingList) {
          if (this.settingList[i].settingId === item.settingId) {
            item.editSetting = false
            this.settingList.splice(i, 1, item)
            break
          }
        }
      })
    },
    hiddenSetting(item) {
      const hidden = true
      updateDeviceSetting({
        settingId: item.settingId,
        hidden: hidden
      }).then(res => {
        const { code } = res
        if (code === '200') {
          item.hidden = hidden
        }
      })
    },
    showSetting(item) {
      const hidden = false
      updateDeviceSetting({
        settingId: item.settingId,
        hidden: hidden
      }).then(res => {
        const { code } = res
        if (code === '200') {
          item.hidden = hidden
        }
      })
    },
    formatDate(time) {
      return formatDate(this, time)
    },
    fStatus(item) {
      if (item.status > 1) {
        return this.$t('failure')
      } else if (item.status === 0) {
        return this.$t('unKnow')
      } else {
        return this.$t('success')
      }
    },
    valueChange(item) {
      this.setting = item
      if (this.setting.type === 'multiCustom') {
        let value = ''
        this.setting.valueList.forEach(v => {
          if (value === '') {
            value = v.value
          } else {
            value = value + ',' + v.value
          }
        })
        this.setting.value = value
      }
      this.updateVal()
    },
    formatDeviceSettingList() {
      const showSettingList = []
      for (let i = 0, j = this.settingList.length; i < j; i++) {
        const setting = {
          ...this.formatDeviceSetting(this.settingList[i])
        }
        showSettingList.push(setting)
      }
      this.showSettingList = showSettingList
    },
    formatDeviceSetting(item) {
      const setting = formatDeviceSetting(item)
      if (!setting.editSetting) {
        setting.editSetting = false
      }
      if (setting.type === 'switch' || setting.type === 'noParam') {
        setting.isFullLine = false
      } else {
        setting.isFullLine = true
      }
      return setting
    },
    updateVal() {
      const json = {
        tag: 'manage',
        settingId: this.setting.settingId,
        keyName: this.setting.keyName,
        value: this.setting.value,
        port: this.setting.port,
        deviceCore: this.deviceCore
      }
      this.settingLoading = true
      sendDeviceSetting(json).then(res => {
        const { code, data } = res
        this.settingLoading = false
        if (code === '200') {
          successNotice(this)
          if (this.setting.type === 'video') {
            this.videoOptions = {
              autoplay: true,
              controls: true,
              sources: [{
                src: data.setting.value,
                type: 'application/x-mpegURL'
              }]
            }
          }
        }
        getDeviceSetting({
          settingId: json.settingId
        }).then(res => {
          const { data, code } = res
          if (code === '200') {
            const setting = formatDeviceSetting(data)
            for (let i = 0, j = this.showSettingList.length; i < j; i++) {
              if (this.showSettingList[i].settingId === setting.settingId) {
                this.showSettingList.splice(i, 1, this.formatDeviceSetting(setting))
              }
            }
          }
        })
      })
    }
  }

}
</script>
<style scoped lang="scss">
  @import '@/styles/element-variables.scss';

  .primary-color {
    color: $--color-primary;
  }

  .item {
    margin-top: 5px;
    padding: 10px;
    border-color: rgba(0, 0, 0, .1);
    border-width: 1px;
    border-radius: 8px;
  }

  .item-border {
    border-style: solid;
  }

  .hidden-border {
    border-style: dashed;
  }

  .check {
    background-color: #ebeef5;
  }

  .item:hover {
    background-color: #efefef;
  }

</style>

